<template>
  <section class="main_" v-loading="loading">
    <!--工具条-->
		<el-col :span="23" class="main_" >
			<el-form :inline="true" >
        <el-form-item>
					<el-select v-model="search.status" size="small"  placeholder="状态" class="select_" @change="initList">
						<el-option v-for="item in options" :key="item.value" :label="item.label"	:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input size="small" v-model="search.userName" placeholder="预约人" @keyup.enter.native="initList" clearable ></el-input>
				</el-form-item>
        <el-form-item>
					<el-input size="small" v-model="search.shopName" placeholder="门店名称" @keyup.enter.native="initList" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="initList" >查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
    <el-table :data="tableData" stripe >
			<el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="shopName" label="预约门店" ></el-table-column>
      <el-table-column label="头像" >
        <template slot-scope="scope">
          <img :src="scope.row.avatar" class="img_">
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="预约人" ></el-table-column>
      <el-table-column prop="tel" label="电话" ></el-table-column>
      <el-table-column prop="arriveDate" label="预约时间" ></el-table-column>
      <el-table-column prop="detail" label="备注" show-overflow-tooltip ></el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
					<span v-if="scope.row.status === 'todo'" class="todo_ blod_">待服务</span>
          <span v-else class="done_ blod_">已服务</span>
				</template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[ 10, 20 , 30]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="page.count">
    </el-pagination>

  </section>
</template>

<script>
  export default {
    data() {
      return {
        loading : false ,
        options: [{ value: 'all', label: '全部' }, { value: 'todo', label: '待服务' }, { value: 'done', label: '已服务' }],
        tableData : [],
        search : {} ,
        page : { skip : 0 ,limit : 10 ,count : 0}
      };
    },
    methods: {
      handleCurrentChange: function(res) {
					if (res == 1)
							this.page.skip = 0;
					else
							this.page.skip = (res - 1) * this.page.limit
					this.initList();
			},
			handleSizeChange: function(res) {
					this.page.limit = res;
					this.initList();
			},
      initList : function () {
        this.loading = true ;
        this.$http.post('/api/admin/queryOrderList',{search :this.search  , page : this.page}).then( res => {
          this.loading = false ;
          let result = res.data ;
          if(result.code == 100){
            this.tableData = result.data ;
            this.page.count = result.count ;
          }
        })
      }
    },
    created() {
      this.initList();
		}
  }
</script>

<style scoped lang="scss">
.main_ {
  margin: {
    top: 5px;
    left: 5px;
  }
  .select_ {
    width: 120px;
  }
}
.img_ {
  width: 40px;
  height: 40px;
}
.blod_ {
  font : {
    weight: bold;
    size: 12px;
  }
}
.todo_ {
  color: #f56c6c;
}
.refuse_ {
  color: #e6a23c;
}
.done_ {
  color: #67c23a;
}
</style>